<template>
  <div class="battery-pack-container">
    <div class="page-header">
      <h1>Battery Pack Monitoring</h1>
      <p>Real-time monitoring of battery pack status</p>
    </div>
    
    <div class="monitoring-content">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="status-card">
            <template #header>
              <div class="card-header">
                <span>Battery Pack Status</span>
              </div>
            </template>
            <div class="status-content">
              <div class="status-item">
                <span class="label">Voltage:</span>
                <span class="value">48.5V</span>
              </div>
              <div class="status-item">
                <span class="label">Current:</span>
                <span class="value">2.3A</span>
              </div>
              <div class="status-item">
                <span class="label">Temperature:</span>
                <span class="value">25°C</span>
              </div>
              <div class="status-item">
                <span class="label">SOC:</span>
                <span class="value">85%</span>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="16">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>Real-time Data</span>
                <el-button size="small">Export</el-button>
              </div>
            </template>
            <div class="chart-placeholder">
              <div class="chart-content">
                <el-icon size="60" color="#909399"><TrendCharts /></el-icon>
                <p>Real-time monitoring chart will be displayed here</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TrendCharts } from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
.battery-pack-container {
  padding: 20px;
  
  .page-header {
    margin-bottom: 30px;
    
    h1 {
      font-size: 28px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 8px 0;
    }
    
    p {
      color: #909399;
      margin: 0;
    }
  }
  
  .monitoring-content {
    .status-card {
      .status-content {
        .status-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .label {
            color: #606266;
            font-weight: 500;
          }
          
          .value {
            color: #303133;
            font-weight: 600;
          }
        }
      }
    }
    
    .chart-card {
      .chart-placeholder {
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .chart-content {
          text-align: center;
          
          p {
            margin-top: 16px;
            color: #909399;
          }
        }
      }
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
